import { useEffect, useState } from 'react';

/**
 * 监听媒体查询的自定义钩子
 * @param query 媒体查询字符串，如 "(min-width: 768px)"
 * @returns 当前是否匹配媒体查询条件
 */
export function useMediaQuery(query: string): boolean {
  // 初始化状态：在服务端渲染时默认为 false
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    // 创建媒体查询列表
    const mediaQueryList = window.matchMedia(query);

    // 初始检查是否匹配
    setMatches(mediaQueryList.matches);

    // 定义监听器回调
    const handleChange = (event: MediaQueryListEvent) => {
      setMatches(event.matches);
    };

    // 添加事件监听
    mediaQueryList.addEventListener('change', handleChange);

    // 清理函数：移除事件监听
    return () => {
      mediaQueryList.removeEventListener('change', handleChange);
    };
  }, [query]); // 当查询字符串变化时重新执行

  return matches;
}
